JavaScript 事件处理

1. 什么是事件？

事件是用户或浏览器执行的某种操作，如鼠标点击、键盘按下、页面加载等。事件触发后，可以使用 JavaScript 编写相应的事件处理器（也称事件监听器）来响应这些操作。

2. 添加事件监听器

在 JavaScript 中，可以通过多种方式为元素添加事件监听器：

2.1 使用 HTML 属性

在 HTML 中直接定义事件属性，最简单但不推荐这种方式，因为它不利于代码的可读性和维护：

<button onclick="alert('Button clicked!')">Click me</button>

2.2 使用 DOM 属性

可以在 JavaScript 中为元素设置事件属性，例如 onclick，这种方法相对简单，但一个元素的特定事件只能绑定一个处理器：

let button = document.querySelector("button");
button.onclick = function() {
    alert("Button clicked!");
};

2.3 使用 addEventListener

推荐使用 addEventListener 方法添加事件监听器，因为它允许为同一事件添加多个处理器，并且可以使用 removeEventListener 移除特定的处理器：

button.addEventListener("click", function() {
    alert("Button clicked!");
});

使用命名函数

如果你需要移除事件监听器，最好使用命名函数：

function handleClick() {
    alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);  // 移除监听器

3. 常见事件类型

3.1 鼠标事件

• click：单击元素时触发。
• dblclick：双击元素时触发。
• mouseover 和 mouseout：鼠标指针移入或移出元素时触发。
• mousedown 和 mouseup：鼠标按下和释放时触发。

button.addEventListener("mouseover", function() {
    button.style.backgroundColor = "yellow";
});
button.addEventListener("mouseout", function() {
    button.style.backgroundColor = "";
});

3.2 键盘事件

• keydown：按下键时触发。
• keypress：按下字符键时触发（已废弃）。
• keyup：释放键时触发。

document.addEventListener("keydown", function(event) {
    console.log("Key pressed:", event.key);
});

3.3 表单事件

• submit：提交表单时触发。
• change：输入值发生改变时触发（用于 <input>、<select> 等）。
• focus 和 blur：元素获得或失去焦点时触发。

let form = document.querySelector("form");
form.addEventListener("submit", function(event) {
    event.preventDefault();  // 阻止默认表单提交行为
    console.log("Form submitted");
});

3.4 文档事件

• DOMContentLoaded：当初始的 HTML 文档被完全加载和解析完成时触发（不等待样式表、图片等加载完成）。
• load：当页面及其所有资源（样式、图片等）完全加载完成时触发。
• scroll：滚动页面或元素时触发。
• resize：调整窗口大小时触发。

window.addEventListener("load", function() {
    console.log("Page fully loaded");
});

window.addEventListener("resize", function() {
    console.log("Window resized");
});

4. 事件对象

当事件触发时，浏览器会生成一个事件对象，并将其传递给事件处理器。事件对象包含有关事件的各种信息，如事件类型、目标元素、鼠标位置等。

4.1 常用属性

• event.type：事件类型。
• event.target：触发事件的元素。
• event.preventDefault()：阻止事件的默认行为。
• event.stopPropagation()：阻止事件在 DOM 中的进一步传播。

button.addEventListener("click", function(event) {
    console.log("Event type:", event.type);
    console.log("Event target:", event.target);
    event.preventDefault();  // 防止默认行为（如表单提交）
});

4.2 鼠标事件的属性

• event.clientX 和 event.clientY：鼠标相对于视口的水平和垂直位置。
• event.button：指示按下了哪个鼠标按钮（左、中、右）。

document.addEventListener("click", function(event) {
    console.log("Mouse position:", event.clientX, event.clientY);
});

4.3 键盘事件的属性

• event.key：按下的键值（如 "Enter"、"a"）。
• event.code：按下键的物理位置（如 "KeyA"、"Enter"）。

document.addEventListener("keydown", function(event) {
    console.log("Key pressed:", event.key);
});

5. 事件传播

事件在 DOM 树中从一个元素流向另一个元素的过程称为 事件传播，包括三个阶段：

• 捕获阶段：从文档根节点向下传播到事件目标。
• 目标阶段：在目标元素上触发事件。
• 冒泡阶段：从目标元素向上传播回文档根节点。

document.body.addEventListener("click", function() {
    console.log("Body clicked");
}, true);  // 捕获阶段处理器

6. 事件委托

事件委托是一种事件处理模式，将子元素的事件处理程序委托给父元素。这种方法在动态创建元素时尤其有用，因为父元素可以捕获其所有子元素的事件。

document.body.addEventListener("click", function(event) {
    if (event.target.tagName === "BUTTON") {
        console.log("Button clicked:", event.target.innerText);
    }
});